<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="Keywords" content="">
        <meta name="description" content="">
<!--        <meta content="width=device-width, initial-scale=0.5, maximum-scale=0.5, user-scalable=0" name="viewport" />-->
        <meta content="yes" name="apple-mobile-web-app-capable" />
        <meta content="black" name="apple-mobile-web-app-status-bar-style" />
        <meta content="telephone=no" name="format-detection" />
        <meta content="width=640,target-densitydpi=device-dpi,user-scalable=no" name="viewport">
        <title>你送我棕</title>
        <link type="text/css" rel="stylesheet" href="css/base.css">
        <link type="text/css" rel="stylesheet" href="css/style.css">
        <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
        <script type="text/javascript" src="js/main.js"></script> 
        <script src="js/jquery-ui.min.js"></script>
        <script src="js/jquery.ui.touch-punch.min.js"></script>
    </head>
    <body>
        <div class="main_container game_bg" id="game_bg">
            <header>
                <div class="logo">
                    <img src="images/metro_logo.jpg">
                </div>
            </header>
            <div>
                <img src="images/game1.png">
            </div>
            <div class="big_img" id="big_img">
                <div class="big_img">
                    <img src="images/zz1_0.png" class="big_img_name" id="big_name">
                    <img src="images/game_list_0.png" id="big1" width="362" height="350">
                    <img src="images/start1.png" id="big2" width="217" height="210">
                </div>
            </div>
            <div style="height:10px;"></div>
            <div class="game_list">
                <div class="game_list_top">
                    <div>
                        <img src="images/game_list_1.png"  class="list_big" width="145" height="140" >
<!--                        <img src="images/game_list_name1.png" class="game_list_name">-->
                    </div>
                    <div style="margin-left:145px;">
                        <img src="images/game_list_2.png"   class="list_big" width="145" height="140">
<!--                        <img src="images/game_list_name2.png"  class="game_list_name">-->
                    </div>
                    <div style="margin-left:290px;">
                        <img src="images/game_list_3.png"   class="list_big" width="145" height="140">
<!--                        <img src="images/game_list_name3.png"  class="game_list_name">-->
                    </div>
                    <div style="margin-left:435px;">
                        <img src="images/game_list_4.png"   class="list_big" width="145" height="140">
<!--                        <img src="images/game_list_name4.png"  class="game_list_name">-->
                    </div>
                </div>
                <div class="game_list_bottom">
                    <div>
                        <img src="images/game_list_5.png"  class="list_small">
<!--                        <img src="images/game_list_name5.png" class="game_list_name">-->
                    </div>
                    <div style="margin-left:145px;">
                        <img src="images/game_list_6.png" class="list_small">
<!--                        <img src="images/game_list_name6.png"  class="game_list_name">-->
                    </div>
                    <div style="margin-left:290px;">
                        <img src="images/game_list_7.png" class="list_small">
<!--                        <img src="images/game_list_name7.png"  class="game_list_name">-->
                    </div>
                    <div style="margin-left:435px;">
                        <img src="images/game_list_8.png" class="list_small">
<!--                        <img src="images/game_list_name8.png"  class="game_list_name">-->
                    </div> 
                </div>                
            </div>
            <div style="height:35px;"></div>
            <div class="game_view">
                <a href="#">
                    <img src="images/game_view.jpg">
                </a>
                <a href="#">
                    <img src="images/game_send.jpg">
                </a>
            </div>
            <div class="pop" id="pop">
                <img src="images/x.png" class="game_guide_close" id="game_guide_close">
                <div class="pop_box">
                    <div class="game_guide">
                        <img src="images/game_guide.png">
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
                var big_pic = null;//框内的粽子
                var small_pic = null;//框内的粽子肉
                var zongzi = null;  //粽子是否被拖放过
                var zongzirong = null;//粽子肉是否被拖放过
                var bag_index = false;//粽子是否包过
                var a;
                var b;
                $('.list_big').draggable({
                        opacity:0.5,
//                        revert:true,  
                        helper: 'clone',
                        start:function(){ 
                            a = 1;
                            b = 0;
                            if(!bag_index){ 
                            }else{//包过之后再拖放
                                $("#big_name").attr("src","images/zz1_0.png");
                                $("#big1").attr("src","images/game_list_0.png");
                                $("#big2").attr("src","images/start1.png");
                                small_pic = "images/start1.png";
                                big_pic = "images/game_list_0.png";
                                bag_index = false;
                            }  
                            big_pic = $(this).attr("src");
                                                     
                        },
                    drag:function(){
                        $(this).css("opacity","0");
                    },
                    stop:function(){
                        $(this).css("opacity","1");
                    }
                    });
                $(".big_img").droppable({
                    drop:function(){
                        if( a == 1){
                                if(!bag_index){ 
                                    zongzi = 1;
                                    }else{
                                    zongzi = 0;
                                    }                        
                                $("#big1").attr("src",big_pic);                                 
                                bag();
                            }
                    }                
                });
            
            
                $('.list_small').draggable({
                            opacity:0.5,
//                            revert:true,
                            helper: 'clone',                    
                            start:function(){
                                a = 0;
                                b = 1;
                                if(!bag_index){
                                }else{//包过之后再拖放
                                    $("#big_name").attr("src","images/zz1_0.png");
                                    $("#big1").attr("src","images/game_list_0.png");
                                    $("#big2").attr("src","images/start1.png");
                                    small_pic = "images/start1.png";
                                    big_pic = "images/game_list_0.png";
                                    bag_index = false;
                                }  
                                small_pic = $(this).attr("src");   
                            },
                            drag:function(){
                                $(this).css("opacity","0");
                            },
                            stop:function(){
                                $(this).css("opacity","1");
                            }
                        });
                $("#big_img").droppable({
                            drop:function(){ 
                                if(b ==1){
                                        if(!bag_index){ 
                                        zongzirong = 1;
                                        }else{
                                        zongzirong = 0;
                                        } 
                                        $("#big2").attr("src",small_pic);
                                        bag();
                                    }                                
                            }                
                        });
            
            //判断之后包粽子
            function bag(){
                if((!!zongzi)&&(!!zongzirong)){ //当粽子和粽子肉都存在                
                    setTimeout(function(){                    
                            $("#big1").attr("src","img/"+big_pic);
                            $("#big2").attr("src","images/start1.png");
                            $("#big_name").attr("src","img/"+small_pic);
                            zongzi = 0;  //粽子是否被拖放过
                            zongzirong = 0;//粽子肉是否被拖放过
                            bag_index = true;
                        }, 1000);                      
                }
            }
        </script>

    </body>
</html>